<template>
  <div>
    <el-divider content-position="center">价格梯度设置</el-divider>
    <p class="tier-tips">价格梯度表示根据购买数量区间设置不同的价格，例如：1-5台每台3元，5-30台每台2元，30台及以上每台1元</p>
    
    <div class="price-tier-list">
      <div v-for="(tier, index) in priceTiers" :key="index" class="price-tier-item">
        <div class="tier-range">
          <el-input-number 
            v-model="tier.range_start" 
            :min="1" 
            :precision="0" 
            controls-position="right"
            size="small"
            @change="validateTierRanges"
          />
          <span class="range-text">台 至</span>
          <el-input-number 
            v-model="tier.range_end" 
            :min="tier.range_start" 
            :precision="0" 
            controls-position="right"
            size="small"
            placeholder="无上限"
            :disabled="index === priceTiers.length - 1"
            @change="validateTierRanges"
          />
          <span class="range-text">台</span>
        </div>
        <div class="tier-price">
          <span>价格：</span>
          <el-input-number 
            v-model="tier.price" 
            :min="0" 
            :precision="0" 
            :step="1"
            controls-position="right" 
            size="small"
          />
          <span>元/台</span>
        </div>
        <el-button 
          type="danger" 
          circle 
          size="small" 
          icon="Delete"
          plain
          @click="removeTier(index)"
          :disabled="priceTiers.length <= 1"
          class="delete-tier-btn"
        />
      </div>
      
      <div class="add-tier-btn">
        <el-button type="primary" plain @click="addTier">
          <el-icon><Plus /></el-icon>
          添加价格梯度
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 添加价格梯度接口定义
interface PriceTier {
  range_start: number
  range_end?: number
  price: number
}

const props = defineProps({
  modelValue: {
    type: Array as () => PriceTier[],
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

// 创建本地响应式数据
const priceTiers = ref<PriceTier[]>([...props.modelValue])

// 监听本地数据变化，更新父组件
watch(priceTiers, (newValue) => {
  emit('update:modelValue', JSON.parse(JSON.stringify(newValue)))
}, { deep: true })

// 监听父组件数据变化，更新本地数据
watch(() => props.modelValue, (newValue) => {
  if (JSON.stringify(priceTiers.value) !== JSON.stringify(newValue)) {
    priceTiers.value = JSON.parse(JSON.stringify(newValue))
  }
}, { deep: true })

// 添加价格梯度
const addTier = () => {
  priceTiers.value.push({
    range_start: 1,
    range_end: undefined,
    price: 0
  })
}

// 删除价格梯度
const removeTier = (index: number) => {
  if (priceTiers.value.length > 1) {
    priceTiers.value.splice(index, 1)
    
    // 如果删除后只剩一个价格区间，确保它是从1到无上限
    if (priceTiers.value.length === 1) {
      priceTiers.value[0].range_start = 1
      priceTiers.value[0].range_end = undefined
    }
  } else {
    ElMessage.warning('至少需要一个价格梯度')
  }
}

// 验证价格梯度范围
const validateTierRanges = () => {
  // 按照range_start从小到大排序
  priceTiers.value.sort((a, b) => a.range_start - b.range_start)
  
  // 确保每个区间的开始值等于前一个区间的结束值（如果有的话）
  for (let i = 1; i < priceTiers.value.length; i++) {
    const prevTier = priceTiers.value[i - 1]
    const currentTier = priceTiers.value[i]
    
    if (prevTier.range_end && currentTier.range_start !== prevTier.range_end) {
      currentTier.range_start = prevTier.range_end
    }
  }
  
  // 确保最后一个区间没有结束值（表示无上限）
  if (priceTiers.value.length > 0) {
    priceTiers.value[priceTiers.value.length - 1].range_end = undefined
  }
}

// 初始化时验证价格梯度
onMounted(() => {
  validateTierRanges()
})
</script>

<style lang="scss" scoped>
.tier-tips {
  font-size: 14px;
  color: #909399;
  margin-bottom: 15px;
  line-height: 1.5;
}

.price-tier-list {
  margin-bottom: 20px;
  
  .price-tier-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 4px;
    background-color: var(--el-fill-color-lighter);
    
    .tier-range {
      display: flex;
      align-items: center;
      margin-right: 15px;
      
      .range-text {
        margin: 0 8px;
        color: #606266;
      }
    }
    
    .tier-price {
      display: flex;
      align-items: center;
      
      span {
        margin: 0 8px;
        color: #606266;
      }
    }
    
    .delete-tier-btn {
      margin-left: auto;
    }
  }
  
  .add-tier-btn {
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }
}
</style> 